<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    .box {
      width: 100%;
      min-height: 270px;
      display: flex;
      /* background-color: greenyellow; */
    }
    .box1 {
      width: 100%;
      height: 150px;
      /* background-color: blanchedalmond; */
    }
    .box2 {
      width: 100%;
      height: 120px;
      /* background-color: red; */
    }
    table {
      width: 300px;
      text-align: center;
    }
    .red {
      color: red;
    }
  </style>
  <body>
    <div class="box" id="app">
      <div class="box1">
        <table border="1" cellspacing="0">
          <tr>
            <th>编号</th>
            <th>科目</th>
            <th>成绩</th>
            <th>操作</th>
          </tr>
          <tbody v-if="list.length>0">
            <tr v-for="(item,index) in list" :key="item.id">
              <td>{{index+1}}</td>
              <td>{{item.name}}</td>
              <td :class="{red:item.score<60}">{{item.score}}</td>
              <td>
                <a href="#" @click.prevent="del(item.id)">{{item.play}}</a>
              </td>
            </tr>
          </tbody>
          <tbody v-else>
            <tr>
              <td colspan="4">暂无数据</td>
            </tr>
          </tbody>
          <tr>
            <td colspan="4">
              <span>总分:{{sumScore}}</span>
              <span>平均分:{{averageScore}}</span>
            </td>
          </tr>
        </table>
      </div>
      <div class="box2">
        科目:
        <input type="text" placeholder="请输入科目" v-model.trim="name" />
        <br /><br />
        分数:<input
          type="text"
          placeholder="请输入分数"
          v-model.number="score"
        />
        <br /><br />
        <button @click="add">添加</button>
      </div>
      <script src="../vue.js"></script>
      <script>
        const app = new Vue({
          el: "#app",
          data: {
            list: [
              { id: 1, name: "语文", score: 46, play: "删除" },
              { id: 2, name: "数学", score: 80, play: "删除" },
              { id: 3, name: "英语", score: 100, play: "删除" },
            ],
            name: "",
            score: "",
          },
          computed: {
            sumScore() {
              return (sum = this.list.reduce(
                (sum, item) => sum + item.score,
                0
              ));
            },
            averageScore() {
              if (this.list.length === 0) {
                return 0;
              }
              return (this.sumScore / this.list.length).toFixed(2);
            },
          },
          methods: {
            del(id) {
              this.list = this.list.filter((item) => item.id !== id);
            },
            add() {
              if (!this.name) {
                alert("请输入正确的科目");
                return;
              }
              if (
                typeof this.score !== "number" ||
                this.score < 0 ||
                this.score > 100
              ) {
                alert("请输入正确的分数");
                return;
              }
              this.list.push({
                id: Date.now(),
                name: this.name,
                score: this.score,
                play: "删除",
              });
              (this.name = ""), (this.score = "");
            },
          },
        });
      </script>
    </div>
  </body>
</html>
